<template>
  <el-form ref="form"
           :inline="true"
           :model="row"
           :rules="rules">
    <el-form-item label="真实姓名"
                  prop="realname">
      <el-input v-model="row.realname"
                maxlength="10"
                placeholder="请输入真实姓名" />
    </el-form-item>
    <br>
    <el-form-item label="手机号码"
                  prop="phone">
      <el-input v-model="row.phone"
                maxlength="11"
                placeholder="请输入手机号码" />
    </el-form-item>
    <br>
    <el-form-item label="所属部门"
                  prop="departmentId">
      <el-select v-model="row.departmentId"
                 placeholder="选择部门"
                 style="width: 200px;">
        <el-option v-for="item in departmentItem"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <br>
    <el-form-item label="所属角色"
                  prop="roleId">
      <el-select v-model="row.roleId"
                 placeholder="选择角色"
                 style="width: 200px;">
        <el-option v-for="item in roleItem"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <br>
    <el-form-item label="所属级别"
                  prop="level">
      <el-select v-model="row.level"
                 placeholder="选择级别"
                 style="width: 200px;">
        <el-option v-for="item in levelItem"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button :loading="loading"
                 type="primary"
                 @click="handleFormSubmit">
        保存
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    row: {
      default: Object,
      type: Object
    },
    loading: {
      default: false,
      type: Boolean
    },
    departmentItem: {
      default: () => [],
      type: Array
    },
    roleItem: {
      default: () => [],
      type: Array
    },
    levelItem: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      rules: {
        realname: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        departmentId: [{ required: true, message: '请输入所属部门', trigger: 'blur' }],
        roleId: [{ required: true, message: '请输入所属角色', trigger: 'blur' }],
        level: [{ required: true, message: '请输入所属级别', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleFormSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.row)
        }
      })
    }
  }
}
</script>
